<template>
    <el-container>
        <el-header class="duration-700 dark:bg-gray-700 dark:text-white" height="150px">
            <p class="course-name">
                <span>
                    {{ all.courseContainerInfo.name }}
                </span>
                <span @click="dark.setDark()">
                    暗黑模式
                </span>
            </p>
            <div>
                <ul>
                    <li @click="page.setCourseContainer('topChose','教学日志')"
                        :class="[page.courseContainer.topChose === '教学日志'?'top-chose':'']">教学日志
                    </li>
                    <li @click="page.setCourseContainer('topChose','成绩单')"
                        :class="[page.courseContainer.topChose === '成绩单'?'top-chose':'']">成绩单
                    </li>
                </ul>
            </div>
        </el-header>
        <!--教学日志-->
        <CourseContainerMain_log v-show="page.courseContainer.topChose==='教学日志'"/>
    </el-container>
</template>

<script setup>
import { usePageStore } from "@/stores/page/page";
import { useDarkStore } from "@/stores/darkMode/darkMode";

const dark = useDarkStore()
const all = useAllStore()
import CourseContainerMain_log from "@/components/MyWork/左边容器/主体内容/CourseContainerMain_log.vue";
import { useAllStore } from "@/stores/all";
import { useRoute } from "vue-router";


const route = useRoute()
all.setCourseContainerInfo("name",route.query.name)
all.setCourseContainerInfo("id",route.query.id)
const page = usePageStore()

</script>

<style scoped lang="less">
.el-header {
    position: relative;
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #dddddd;

    .course-name {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        font-weight: 600;
    }

    > div {
        position: absolute;
        bottom: 0;
        width: 96%;
        height: 50px;
        padding-right: 50%;

        ul {
            display: flex;

            li {
                flex: 1;
                line-height: 50px;
                cursor: pointer;
            }

            .top-chose {
                color: #4f95f5;
            }
        }
    }
}
</style>